<template>
	<!-- 产品介绍 -->
	<view>
		<global-navgation  title="产品介绍"></global-navgation>
		<view class="top">
			<image src="../../static/images/57.png" mode=""></image>
			<input class="search" placeholder="请输入关键字搜索">
			
			
			</input>
		</view>
		<view class="nav">
				<view class="under2" @click="under1">
					<view >
						营养补充系列
					</view>
				</view>
				<view class="under2"  @click="under2">
					<view >
						营养补充系列
					</view>
				</view>
				<view class="under1" >
					<view >
						营养补充系列
					</view>
				</view>
				
		</view>
		<view class="lists" >
			<view class="list1">
				<image src="../../static/images/58.png" mode=""></image>
				<text>这是商品标题</text>
			</view>
			<view class="list2">
				<image src="../../static/images/58.png" mode=""></image>
				<text>这是商品标题</text>
			</view>
		</view>
		
	
	</view>
</template>
<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default{
		components:{
			globalNavgation
		},
		data(){
			return{
				  btnnum: 0,
			}
		},
		methods:{
		   change(e) {
		      this.btnnum = e
		      console.log(this.btnnum)
		  },
		  under1(){
		  			  uni.navigateTo({
		  			  	url:'../Introduction/Introduction'
		  			  })
		  },
		  under2(){
		  			  uni.navigateTo({
		  			  	url:'../Introduction1/Introduction'
		  			  })
		  }
		}
	}
</script>
<style>
	 .dis{
	        display: block;
	    }  
	.top{
			width: 100%;
			height: 108rpx;
			background: #F7F7F7;
			position: relative;
		}
		.lists{
			width: 100%;
			height: 436rpx;
			display: flex;
			
		}
		.lists .list1{
			width: 340rpx;
			height: 436rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
			border-radius: 16rpx;
			margin-top: 24rpx;
			margin-left: 24rpx;
			position: relative;
		}
		.lists .list1 image{
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 16rpx 16rpx 0 0;
		}
		.lists .list1 text{
			display: block;
			height: 44rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 16px;
			line-height: 22px;
			color: rgba(0, 0, 0, 0.85);
			position: absolute;
			left: 20rpx;
			bottom: 36rpx;
		}
		.lists .list2 image{
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 16rpx 16rpx 0 0;
		}
		.lists .list2 text{
			display: block;
			height: 44rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 16px;
			line-height: 22px;
			color: rgba(0, 0, 0, 0.85);
			position: absolute;
			left: 20rpx;
			bottom: 36rpx;
		}
		.lists .list2{
			width: 340rpx;
			height: 436rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
			border-radius: 16rpx;
			margin-top: 24rpx;
			margin-left: 22rpx;
			margin-right: 24rpx;
			position: relative;
		}
		
		.top .search {
			width: 686rpx;
			height: 68rpx;
			position: absolute;
			top: 20rpx;
			left: 32rpx;
			background: #FFFFFF;
			border: 1px solid rgba(151, 151, 151, 0.1);
			box-sizing: border-box;
			border-radius: 16rpx;
			background-origin: content-box;
			text-indent: 72rpx;
	/* 		background: url(../../static/images/57.png) no-repeat 36rpx 22rpx;
			background-size: 24rpx 24rpx;
			background-position: left; */
			
		}
		.top image{
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 42rpx;
			left: 68rpx;
			z-index: 2;
		}
		.nav{
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
		}
		.nav .under1 {
			width: 33%;
			height: 90rpx;
			background: #FFFFFF;
			line-height: 90rpx;
			border-bottom: 2rpx solid #3965FF;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			font-size: 14px;
			
			text-align: center;
			color: #3965FF;
		}
		
		.nav .under2 {
			width: 33%;
			height: 90rpx;
			background: #FFFFFF;
			line-height: 90rpx;
			border-bottom: 2rpx solid #fff;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			font-size: 14px;
			
			text-align: center;
			color: rgba(0, 0, 0, 0.65);
		}
		
		
		
</style>